<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2024/11/4
  Time: 18:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta charset="utf-8"/>
  <title>错误页面</title>
  <style>
    body {
      margin: 0;
    }

    h1 {
      font-family: 'Lato', sans-serif;
      font-weight: 300;
      letter-spacing: 2px;
      font-size: 48px;
    }

    p {
      font-family: 'Lato', sans-serif;
      letter-spacing: 1px;
      font-size: 14px;
      color: #333333;
    }

    .header {
      position: relative;
      text-align: center;
      background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
      color: white;
    }

    .logo {
      width: 50px;
      fill: white;
      padding-right: 15px;
      display: inline-block;
      vertical-align: middle;
    }

    .inner-header {
      height: 65vh;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    .flex {
      /*Flexbox for containers*/
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .waves {
      position: relative;
      width: 100%;
      height: 15vh;
      margin-bottom: -7px; /*Fix for safari gap*/
      min-height: 100px;
      max-height: 150px;
    }

    .content .button {
      display: inline-block;
      padding: 0 20px;
      line-height: 40px;
      font-size: 14px;
      color: #fff;
      background-color: #5dadf5;
      text-decoration: none;
    }

    .content .button:hover {
      opacity: .9;
    }

    /* Animation */

    .parallax > use {
      animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
    }

    .parallax > use:nth-child(1) {
      animation-delay: -2s;
      animation-duration: 7s;
    }

    .parallax > use:nth-child(2) {
      animation-delay: -3s;
      animation-duration: 10s;
    }

    .parallax > use:nth-child(3) {
      animation-delay: -4s;
      animation-duration: 13s;
    }

    .parallax > use:nth-child(4) {
      animation-delay: -5s;
      animation-duration: 20s;
    }

    @keyframes move-forever {
      0% {
        transform: translate3d(-90px, 0, 0);
      }
      100% {
        transform: translate3d(85px, 0, 0);
      }
    }

    /*Shrinking for mobile*/
    @media (max-width: 768px) {
      .waves {
        height: 40px;
        min-height: 40px;
      }

      .content {
        height: 30vh;
      }

      h1 {
        font-size: 24px;
      }
    }

    .card {
      text-align: left;
      letter-spacing: 1px;
      color: #666666;
      width: 300px;
      padding: 20px 100px;
      min-height: 250px;
      background: rgba(255, 255, 255, .4);
      border-radius: 5px;
    }

    .card .card-title {
      color: #ff2929;
      padding: 10px 0;
      font-size: 24px;
    }

    .card .card-content{
      word-break: break-all;
    }

  </style>
</head>
<body>
<div class="header">
  <div class="inner-header flex">
    <div class="card">
      <div class="card-title" align="center"><b class="status"></b> 页面响应错误！</div>
    </div>
  </div>
  <svg
          class="waves"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 24 150 28"
          preserveAspectRatio="none"
          shape-rendering="auto"
  >
    <defs>
      <path
              id="gentle-wave"
              d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
      />
    </defs>
    <g class="parallax">
      <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7)"/>
      <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)"/>
      <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)"/>
      <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff"/>
    </g>
  </svg>
</div>

<div class="content flex">
  <p>
    <a class="button" href="javascript:history.go(-1)">返回主页</a>
  </p>
</div>

</body>
<script type="text/javascript">
  var urlParams = new URLSearchParams(window.location.search);
  var statusCode = urlParams.get('status');
  document.querySelectorAll('.status').forEach(function (e) {
    e.textContent = statusCode;
  })
  document.querySelector('.uri').textContent = urlParams.get('uri');
  document.querySelector('.args').textContent = urlParams.get('args');
  document.querySelector('.time_local').textContent = urlParams.get('time_local');
  document.querySelector('.remote_addr').textContent = urlParams.get('remote_addr');
</script>
</html>